<!--
 * @Author: Bennty
 * @Date: 2024-07-17 15:32:02
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-13 16:17:52
 * @Description: 请填写简介
-->
<template>
    <el-dialog v-model="props.visible" title="财务审核" width="30%" @close="handleClose" destroy-on-close>
        <el-card shadow="never">
            <template #header>
                <el-descriptions>
                    <el-descriptions-item label="LOGO名称：">
                        {{ props.data?.customerName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="订单总价：">
                        {{ props.data?.contractAmount }}
                    </el-descriptions-item>
                    <el-descriptions-item label="合同总价：">
                        {{ props.data?.contractAmount }}
                    </el-descriptions-item>
                </el-descriptions>
            </template>
            <el-card class="examined-order" v-for="(item,index) in formData" :id="item?.id">
                <template #header>
                    <div class="order-header">
                        <h3>{{ `付款单${Number(index) + 1}：` }}</h3>
                        <h3>{{ `本单付款金额：${item.paymentAmount}` }}</h3>
                    </div>
                </template>
                <el-form :ref="item.formRef" >
                    <el-form-item label="付款日期">
                        {{ item.paymentDate }}
                    </el-form-item>
                    <el-form-item label="付款方式">
                        {{ item.paymentMethod == '1'?'线上':'线下' }}
                    </el-form-item>
                    <el-form-item label="付款人">
                        {{ item.createByName }}
                    </el-form-item>
                    <el-form-item label="凭证上传" prop="fileUrl" required message="">
                        <el-upload
                            class="upload-demo"
                            :ref="item.uploadRef"
                            
                            drag
                            multiple
                            :action="uploadImgUrl"
                            :headers="headers"
                            :before-upload="beforeAvatarUpload"
                            :on-success="(response:any, file: any)=>handleUpLoadSuccess(response,file,item)"
                        >
                            <el-icon class="el-icon--upload"><Plus /></el-icon>
                            <div class="el-upload__text">点击或拖拽文件到此处上传</div>
                            <template #tip>
                                <div class="el-upload__tip">
                                    文件不超过10MB
                                </div>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-card>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance,UploadInstance, UploadProps,FormRules } from 'element-plus';
import { globalHeaders } from "@/utils/request";
import { getExaminesRecordByIdApi,addFinanceExamineApi } from '@/api/sj/contract-crm/index';


const props = defineProps(['visible', 'data', 'examineData']);
const emits = defineEmits(['close','submit']);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl + "/resource/oss/upload");
const headers = ref(globalHeaders);
const formData = ref<any[]>([]);

const getExaminesRecord = async (id:any) => {
    const { data } = await getExaminesRecordByIdApi(id);
    formData.value = data.map((item:any)=>{return {...item,fileUrl: undefined}})
    console.log(formData.value);
};

watch(()=>props.data,()=>{
    getExaminesRecord(props.data.id);
},{deep: true});


const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.size / 1024 / 1024 > 10) {
        ElMessage.error('图片大小不可超过 10MB!')
        return false;
    }
    return true;
};

const handleUpLoadSuccess = (response:any, file:any, form: any)=>{
    form.fileUrl = response.data.url;
};

const handleSubmit = async ()=>{
    await addFinanceExamineApi(formData.value).then((result:any)=>{
        if(result.code == 200){
            emits('submit',true);
        }else{
            emits('submit',false);
        };
    });
};

const handleClose = ()=>{
    formData.value.forEach((item:any)=>{
        item.proof = [];
    });
    emits('close');
};

</script>

<style lang="scss" scoped>
.examined-order:not(:first-child){
    margin-top: 10px;
}
.order-header{
    display: flex;
    justify-content: space-between;
}
.upload-demo{
    width: 60%;
}
.dialog-footer{
    display:flex;
    justify-content: center;
}
</style>